<template>
	<view :class="['page-container bg-grey']">
		<!-- 固定头部区域 -->
		<top-header :scrollY="scrollY" :listData="topBannerList"></top-header>
		<!--内容区域-->
		<view class="content-wrap">
			<!--快捷菜单+公告+广告-->
			<quick-menu :menuList="menuListData" :noticeList="noticeList" :waistList="waistList" />
			<view class="gradient-wrap plr-24 pb-32">
				<!--区域-->
				<district :listData="pageList" />
				<!--热门景区-->
				<hot
					:resortList="resortList"
					:lineList="lineList"
					v-if="lineList.length > 0 || resortList.length > 0"
				/>
			</view>
			<!--为你推荐-->
			<waterfall :listData="waterFallList" v-if="waterFallList.length > 0"></waterfall>
		</view>
		<home-popup />
		<footer-bar :current="0" />
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { onLoad, onShow, onPageScroll, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app"
import useCommonStore from "@/store/common"
import { menuList } from "./mock"
import Hot from "@/pages/home/components/hot.vue"
import QuickMenu from "@/pages/home/components/quick-menu.vue"
import FooterBar from "@/components/footer/footer-bar.vue"
import TopHeader from "@/pages/home/components/top-header.vue"
import District from "@/pages/home/components/district.vue"
import Waterfall from "@/pages/home/components/waterfall.vue"
import homePopup from "./components/home-popup.vue"
import {
	$getBannerList,
	$getWaistList,
	$getNoticeList,
	$getResortRecommendList,
	$getTripRecommendList,
	$getWaterfallList,
} from "@/api/home"
import { $getPublicityList } from "@/api/hy/scenic"

const commonStore = useCommonStore()
const statusBarHeight = toRef(commonStore, "statusBarHeight")
const navbarHeight = toRef(commonStore, "navbarHeight")
const imgBaseUrl = inject("imgBaseUrl")

const location = commonStore.region_name
const menuListData = ref(menuList)
const topBannerList = ref([])
const pageList = ref([])
const noticeList = ref([])
const resortList = ref([])
const lineList = ref([])
const waistList = ref([])
const waterFallList = ref([])

// 监听页面滚动
const scrollY = ref(0)
onPageScroll((e) => {
	scrollY.value = e.scrollTop
})

// 分享给好友
onShareAppMessage(() => {
	return {
		title: "恩施旅游",
		path: "/pages/home/index",
		imageUrl: `https://oiz.zhijingyou.com/staging-upload/2024/lvapps/1731032162-532998523520448.jpg`,
	}
})
// 分享到朋友圈
onShareTimeline(() => {
	return {}
})

onShow(() => {})
onLoad(() => {
	$getBannerList().then((res: any) => {
		topBannerList.value = res.list
	})
	$getWaistList().then((res: any) => {
		waistList.value = res.list
	})
	$getNoticeList().then((res: any) => {
		noticeList.value = res.list
	})
	$getPublicityList().then((res: any) => {
		pageList.value = res.list
	})
	$getResortRecommendList().then((res: any) => {
		resortList.value = res.list
	})
	$getTripRecommendList().then((res: any) => {
		lineList.value = res.list
	})
	$getWaterfallList().then((res: any) => {
		waterFallList.value = res.list
	})
})
</script>
<style lang="scss" scoped>
.page-container {
	padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
}
.content-wrap {
	position: relative;
	margin-top: -110rpx;
	background: #f7f8f9;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
}

.gradient-wrap {
	background: linear-gradient(to bottom, #ffffff, #f1f2f5);
	border-top-left-radius: 16rpx;
	border-top-right-radius: 16rpx;
}
</style>
